<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2653504" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">模型</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">指北针</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">指北针</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">指北</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">剖切</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">爆炸</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">组织树</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">容器爆炸</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">爆炸未点击</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">定位 位置</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe912;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe912;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec0d;</span>
                <div class="name">应用资源</div>
                <div class="code-name">&amp;#xec0d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">应用 (7)</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">应用</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">中心</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe844;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">系统监控</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">权限</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">数据 1</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">数据 门户-logo3</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">挖矿</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">主动挖掘</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">组件_文本挖掘</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe897;</span>
                <div class="name">挖易</div>
                <div class="code-name">&amp;#xe897;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">导航-场景挖掘</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">模型</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">模型</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">加载模型</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">鹰眼系统</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">鹰眼</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">鹰眼</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">鹰眼</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d4;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">工具</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">鹰眼</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">面积</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">直角测量</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">工具</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe785;</span>
                <div class="name">距离测量</div>
                <div class="code-name">&amp;#xe785;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">坐标</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">坐标</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">面积测量</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">地形开挖-01</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">工具</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">三角测量</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">面积测量</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">面积测量</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">贴地测量</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">贴地测量</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">分析</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">坐标定位</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">分屏对比</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">坐标定位</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">鹰眼地图</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">面积</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">空间测量</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">面积</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">拾取坐标</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe851;</span>
                <div class="name">地形开挖</div>
                <div class="code-name">&amp;#xe851;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">地形开挖-泛白</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">贴地测面</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">测量</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">拾取坐标@3x</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89c;</span>
                <div class="name">测量</div>
                <div class="code-name">&amp;#xe89c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">分屏</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">工具</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">三角测量</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">分析</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81b;</span>
                <div class="name">分屏 2</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">鹰眼</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">鹰眼</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">坐标定位</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1630377996316') format('woff2'),
       url('iconfont.woff?t=1630377996316') format('woff'),
       url('iconfont.ttf?t=1630377996316') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont dx-moxing2"></span>
            <div class="name">
              模型
            </div>
            <div class="code-name">.dx-moxing2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhibeizhen"></span>
            <div class="name">
              指北针
            </div>
            <div class="code-name">.dx-zhibeizhen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhibeizhen1"></span>
            <div class="name">
              指北针
            </div>
            <div class="code-name">.dx-zhibeizhen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhibei"></span>
            <div class="name">
              指北
            </div>
            <div class="code-name">.dx-zhibei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-pouqie"></span>
            <div class="name">
              剖切
            </div>
            <div class="code-name">.dx-pouqie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-baozha"></span>
            <div class="name">
              爆炸
            </div>
            <div class="code-name">.dx-baozha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tree"></span>
            <div class="name">
              组织树
            </div>
            <div class="code-name">.dx-tree
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-rongqibaozha"></span>
            <div class="name">
              容器爆炸
            </div>
            <div class="code-name">.dx-rongqibaozha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-baozhaweidianji"></span>
            <div class="name">
              爆炸未点击
            </div>
            <div class="code-name">.dx-baozhaweidianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dingweiweizhi"></span>
            <div class="name">
              定位 位置
            </div>
            <div class="code-name">.dx-dingweiweizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong1"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong2"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-iconfont_yingyong"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-iconfont_yingyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong3"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-application"></span>
            <div class="name">
              应用资源
            </div>
            <div class="code-name">.dx-application
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong7"></span>
            <div class="name">
              应用 (7)
            </div>
            <div class="code-name">.dx-yingyong7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong4"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong5"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyong6"></span>
            <div class="name">
              应用
            </div>
            <div class="code-name">.dx-yingyong6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhongxin"></span>
            <div class="name">
              中心
            </div>
            <div class="code-name">.dx-zhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xitong"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.dx-xitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xitong1"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.dx-xitong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tongji"></span>
            <div class="name">
              系统监控
            </div>
            <div class="code-name">.dx-tongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xitong2"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.dx-xitong2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-kongtiaotubiao-"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.dx-kongtiaotubiao-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xitong3"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.dx-xitong3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-quanxian"></span>
            <div class="name">
              权限
            </div>
            <div class="code-name">.dx-quanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.dx-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuju"></span>
            <div class="name">
              数据 1
            </div>
            <div class="code-name">.dx-shuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuju1"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx-shuju1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuju2"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx-shuju2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx--"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuju4"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx-shuju4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shujumenhu-logo3"></span>
            <div class="name">
              数据 门户-logo3
            </div>
            <div class="code-name">.dx-shujumenhu-logo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shujuyuan"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx-shujuyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuju5"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx-shuju5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuju6"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.dx-shuju6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-wakuang"></span>
            <div class="name">
              挖矿
            </div>
            <div class="code-name">.dx-wakuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhudongwajue"></span>
            <div class="name">
              主动挖掘
            </div>
            <div class="code-name">.dx-zhudongwajue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zujian_wenbenwajue"></span>
            <div class="name">
              组件_文本挖掘
            </div>
            <div class="code-name">.dx-zujian_wenbenwajue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-wayi"></span>
            <div class="name">
              挖易
            </div>
            <div class="code-name">.dx-wayi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-changjingwajue"></span>
            <div class="name">
              导航-场景挖掘
            </div>
            <div class="code-name">.dx-changjingwajue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-moxing"></span>
            <div class="name">
              模型
            </div>
            <div class="code-name">.dx-moxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-moxing1"></span>
            <div class="name">
              模型
            </div>
            <div class="code-name">.dx-moxing1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-jiazaimoxing"></span>
            <div class="name">
              加载模型
            </div>
            <div class="code-name">.dx-jiazaimoxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyanxitong"></span>
            <div class="name">
              鹰眼系统
            </div>
            <div class="code-name">.dx-yingyanxitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyan11"></span>
            <div class="name">
              鹰眼
            </div>
            <div class="code-name">.dx-yingyan11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyan2"></span>
            <div class="name">
              鹰眼
            </div>
            <div class="code-name">.dx-yingyan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyan3"></span>
            <div class="name">
              鹰眼
            </div>
            <div class="code-name">.dx-yingyan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tuceng2"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.dx-tuceng2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-layer"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.dx-layer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tuceng3"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.dx-tuceng3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gongju2"></span>
            <div class="name">
              工具
            </div>
            <div class="code-name">.dx-gongju2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyan-1"></span>
            <div class="name">
              鹰眼
            </div>
            <div class="code-name">.dx-yingyan-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-mianji"></span>
            <div class="name">
              面积
            </div>
            <div class="code-name">.dx-mianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhijiaoceliang"></span>
            <div class="name">
              直角测量
            </div>
            <div class="code-name">.dx-zhijiaoceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tuceng"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.dx-tuceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gongju"></span>
            <div class="name">
              工具
            </div>
            <div class="code-name">.dx-gongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-juliceliang"></span>
            <div class="name">
              距离测量
            </div>
            <div class="code-name">.dx-juliceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zuobiao"></span>
            <div class="name">
              坐标
            </div>
            <div class="code-name">.dx-zuobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zuobiao1"></span>
            <div class="name">
              坐标
            </div>
            <div class="code-name">.dx-zuobiao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-mianjiceliang"></span>
            <div class="name">
              面积测量
            </div>
            <div class="code-name">.dx-mianjiceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dixingkaiwa-"></span>
            <div class="name">
              地形开挖-01
            </div>
            <div class="code-name">.dx-dixingkaiwa-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gongju1"></span>
            <div class="name">
              工具
            </div>
            <div class="code-name">.dx-gongju1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tuceng1"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.dx-tuceng1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-sanjiaoceliang"></span>
            <div class="name">
              三角测量
            </div>
            <div class="code-name">.dx-sanjiaoceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-mianjiceliang1"></span>
            <div class="name">
              面积测量
            </div>
            <div class="code-name">.dx-mianjiceliang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-mianjiceliang2"></span>
            <div class="name">
              面积测量
            </div>
            <div class="code-name">.dx-mianjiceliang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tiediceliang"></span>
            <div class="name">
              贴地测量
            </div>
            <div class="code-name">.dx-tiediceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tiediceliang1"></span>
            <div class="name">
              贴地测量
            </div>
            <div class="code-name">.dx-tiediceliang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fenxi"></span>
            <div class="name">
              分析
            </div>
            <div class="code-name">.dx-fenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zuobiaodingwei"></span>
            <div class="name">
              坐标定位
            </div>
            <div class="code-name">.dx-zuobiaodingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fenpingduibi"></span>
            <div class="name">
              分屏对比
            </div>
            <div class="code-name">.dx-fenpingduibi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zuobiaodingwei-01"></span>
            <div class="name">
              坐标定位
            </div>
            <div class="code-name">.dx-zuobiaodingwei-01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyanditu"></span>
            <div class="name">
              鹰眼地图
            </div>
            <div class="code-name">.dx-yingyanditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-Square1x"></span>
            <div class="name">
              面积
            </div>
            <div class="code-name">.dx-Square1x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-kongjianceliang"></span>
            <div class="name">
              空间测量
            </div>
            <div class="code-name">.dx-kongjianceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-mianji1"></span>
            <div class="name">
              面积
            </div>
            <div class="code-name">.dx-mianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shiquzuobiaobeifen"></span>
            <div class="name">
              拾取坐标
            </div>
            <div class="code-name">.dx-shiquzuobiaobeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dixingkaiwa"></span>
            <div class="name">
              地形开挖
            </div>
            <div class="code-name">.dx-dixingkaiwa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dixingkaiwa-fanbai"></span>
            <div class="name">
              地形开挖-泛白
            </div>
            <div class="code-name">.dx-dixingkaiwa-fanbai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tiedicemian"></span>
            <div class="name">
              贴地测面
            </div>
            <div class="code-name">.dx-tiedicemian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-celiang"></span>
            <div class="name">
              测量
            </div>
            <div class="code-name">.dx-celiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shiquzuobiao3x"></span>
            <div class="name">
              拾取坐标@3x
            </div>
            <div class="code-name">.dx-shiquzuobiao3x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-celiang1"></span>
            <div class="name">
              测量
            </div>
            <div class="code-name">.dx-celiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fenping"></span>
            <div class="name">
              分屏
            </div>
            <div class="code-name">.dx-fenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-toolsbar"></span>
            <div class="name">
              工具
            </div>
            <div class="code-name">.dx-toolsbar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-sanjiaoceliang1"></span>
            <div class="name">
              三角测量
            </div>
            <div class="code-name">.dx-sanjiaoceliang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fenxi1"></span>
            <div class="name">
              分析
            </div>
            <div class="code-name">.dx-fenxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fenping2"></span>
            <div class="name">
              分屏 2
            </div>
            <div class="code-name">.dx-fenping2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyan"></span>
            <div class="name">
              鹰眼
            </div>
            <div class="code-name">.dx-yingyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yingyan1"></span>
            <div class="name">
              鹰眼
            </div>
            <div class="code-name">.dx-yingyan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tubiao-118"></span>
            <div class="name">
              坐标定位
            </div>
            <div class="code-name">.dx-tubiao-118
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont dx-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-moxing2"></use>
                </svg>
                <div class="name">模型</div>
                <div class="code-name">#dx-moxing2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhibeizhen"></use>
                </svg>
                <div class="name">指北针</div>
                <div class="code-name">#dx-zhibeizhen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhibeizhen1"></use>
                </svg>
                <div class="name">指北针</div>
                <div class="code-name">#dx-zhibeizhen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhibei"></use>
                </svg>
                <div class="name">指北</div>
                <div class="code-name">#dx-zhibei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-pouqie"></use>
                </svg>
                <div class="name">剖切</div>
                <div class="code-name">#dx-pouqie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-baozha"></use>
                </svg>
                <div class="name">爆炸</div>
                <div class="code-name">#dx-baozha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tree"></use>
                </svg>
                <div class="name">组织树</div>
                <div class="code-name">#dx-tree</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-rongqibaozha"></use>
                </svg>
                <div class="name">容器爆炸</div>
                <div class="code-name">#dx-rongqibaozha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-baozhaweidianji"></use>
                </svg>
                <div class="name">爆炸未点击</div>
                <div class="code-name">#dx-baozhaweidianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dingweiweizhi"></use>
                </svg>
                <div class="name">定位 位置</div>
                <div class="code-name">#dx-dingweiweizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong1"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong2"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-iconfont_yingyong"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-iconfont_yingyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong3"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-application"></use>
                </svg>
                <div class="name">应用资源</div>
                <div class="code-name">#dx-application</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong7"></use>
                </svg>
                <div class="name">应用 (7)</div>
                <div class="code-name">#dx-yingyong7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong4"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong5"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyong6"></use>
                </svg>
                <div class="name">应用</div>
                <div class="code-name">#dx-yingyong6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhongxin"></use>
                </svg>
                <div class="name">中心</div>
                <div class="code-name">#dx-zhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xitong"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#dx-xitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xitong1"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#dx-xitong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tongji"></use>
                </svg>
                <div class="name">系统监控</div>
                <div class="code-name">#dx-tongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xitong2"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#dx-xitong2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-kongtiaotubiao-"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#dx-kongtiaotubiao-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xitong3"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#dx-xitong3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-quanxian"></use>
                </svg>
                <div class="name">权限</div>
                <div class="code-name">#dx-quanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#dx-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuju"></use>
                </svg>
                <div class="name">数据 1</div>
                <div class="code-name">#dx-shuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuju1"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx-shuju1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuju2"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx-shuju2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx--"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuju4"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx-shuju4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shujumenhu-logo3"></use>
                </svg>
                <div class="name">数据 门户-logo3</div>
                <div class="code-name">#dx-shujumenhu-logo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shujuyuan"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx-shujuyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuju5"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx-shuju5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuju6"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#dx-shuju6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-wakuang"></use>
                </svg>
                <div class="name">挖矿</div>
                <div class="code-name">#dx-wakuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhudongwajue"></use>
                </svg>
                <div class="name">主动挖掘</div>
                <div class="code-name">#dx-zhudongwajue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zujian_wenbenwajue"></use>
                </svg>
                <div class="name">组件_文本挖掘</div>
                <div class="code-name">#dx-zujian_wenbenwajue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-wayi"></use>
                </svg>
                <div class="name">挖易</div>
                <div class="code-name">#dx-wayi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-changjingwajue"></use>
                </svg>
                <div class="name">导航-场景挖掘</div>
                <div class="code-name">#dx-changjingwajue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-moxing"></use>
                </svg>
                <div class="name">模型</div>
                <div class="code-name">#dx-moxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-moxing1"></use>
                </svg>
                <div class="name">模型</div>
                <div class="code-name">#dx-moxing1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-jiazaimoxing"></use>
                </svg>
                <div class="name">加载模型</div>
                <div class="code-name">#dx-jiazaimoxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyanxitong"></use>
                </svg>
                <div class="name">鹰眼系统</div>
                <div class="code-name">#dx-yingyanxitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyan11"></use>
                </svg>
                <div class="name">鹰眼</div>
                <div class="code-name">#dx-yingyan11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyan2"></use>
                </svg>
                <div class="name">鹰眼</div>
                <div class="code-name">#dx-yingyan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyan3"></use>
                </svg>
                <div class="name">鹰眼</div>
                <div class="code-name">#dx-yingyan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tuceng2"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#dx-tuceng2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-layer"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#dx-layer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tuceng3"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#dx-tuceng3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gongju2"></use>
                </svg>
                <div class="name">工具</div>
                <div class="code-name">#dx-gongju2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyan-1"></use>
                </svg>
                <div class="name">鹰眼</div>
                <div class="code-name">#dx-yingyan-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-mianji"></use>
                </svg>
                <div class="name">面积</div>
                <div class="code-name">#dx-mianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhijiaoceliang"></use>
                </svg>
                <div class="name">直角测量</div>
                <div class="code-name">#dx-zhijiaoceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tuceng"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#dx-tuceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gongju"></use>
                </svg>
                <div class="name">工具</div>
                <div class="code-name">#dx-gongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-juliceliang"></use>
                </svg>
                <div class="name">距离测量</div>
                <div class="code-name">#dx-juliceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zuobiao"></use>
                </svg>
                <div class="name">坐标</div>
                <div class="code-name">#dx-zuobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zuobiao1"></use>
                </svg>
                <div class="name">坐标</div>
                <div class="code-name">#dx-zuobiao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-mianjiceliang"></use>
                </svg>
                <div class="name">面积测量</div>
                <div class="code-name">#dx-mianjiceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dixingkaiwa-"></use>
                </svg>
                <div class="name">地形开挖-01</div>
                <div class="code-name">#dx-dixingkaiwa-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gongju1"></use>
                </svg>
                <div class="name">工具</div>
                <div class="code-name">#dx-gongju1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tuceng1"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#dx-tuceng1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-sanjiaoceliang"></use>
                </svg>
                <div class="name">三角测量</div>
                <div class="code-name">#dx-sanjiaoceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-mianjiceliang1"></use>
                </svg>
                <div class="name">面积测量</div>
                <div class="code-name">#dx-mianjiceliang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-mianjiceliang2"></use>
                </svg>
                <div class="name">面积测量</div>
                <div class="code-name">#dx-mianjiceliang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tiediceliang"></use>
                </svg>
                <div class="name">贴地测量</div>
                <div class="code-name">#dx-tiediceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tiediceliang1"></use>
                </svg>
                <div class="name">贴地测量</div>
                <div class="code-name">#dx-tiediceliang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fenxi"></use>
                </svg>
                <div class="name">分析</div>
                <div class="code-name">#dx-fenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zuobiaodingwei"></use>
                </svg>
                <div class="name">坐标定位</div>
                <div class="code-name">#dx-zuobiaodingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fenpingduibi"></use>
                </svg>
                <div class="name">分屏对比</div>
                <div class="code-name">#dx-fenpingduibi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zuobiaodingwei-01"></use>
                </svg>
                <div class="name">坐标定位</div>
                <div class="code-name">#dx-zuobiaodingwei-01</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyanditu"></use>
                </svg>
                <div class="name">鹰眼地图</div>
                <div class="code-name">#dx-yingyanditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-Square1x"></use>
                </svg>
                <div class="name">面积</div>
                <div class="code-name">#dx-Square1x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-kongjianceliang"></use>
                </svg>
                <div class="name">空间测量</div>
                <div class="code-name">#dx-kongjianceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-mianji1"></use>
                </svg>
                <div class="name">面积</div>
                <div class="code-name">#dx-mianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shiquzuobiaobeifen"></use>
                </svg>
                <div class="name">拾取坐标</div>
                <div class="code-name">#dx-shiquzuobiaobeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dixingkaiwa"></use>
                </svg>
                <div class="name">地形开挖</div>
                <div class="code-name">#dx-dixingkaiwa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dixingkaiwa-fanbai"></use>
                </svg>
                <div class="name">地形开挖-泛白</div>
                <div class="code-name">#dx-dixingkaiwa-fanbai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tiedicemian"></use>
                </svg>
                <div class="name">贴地测面</div>
                <div class="code-name">#dx-tiedicemian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-celiang"></use>
                </svg>
                <div class="name">测量</div>
                <div class="code-name">#dx-celiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shiquzuobiao3x"></use>
                </svg>
                <div class="name">拾取坐标@3x</div>
                <div class="code-name">#dx-shiquzuobiao3x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-celiang1"></use>
                </svg>
                <div class="name">测量</div>
                <div class="code-name">#dx-celiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fenping"></use>
                </svg>
                <div class="name">分屏</div>
                <div class="code-name">#dx-fenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-toolsbar"></use>
                </svg>
                <div class="name">工具</div>
                <div class="code-name">#dx-toolsbar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-sanjiaoceliang1"></use>
                </svg>
                <div class="name">三角测量</div>
                <div class="code-name">#dx-sanjiaoceliang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fenxi1"></use>
                </svg>
                <div class="name">分析</div>
                <div class="code-name">#dx-fenxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fenping2"></use>
                </svg>
                <div class="name">分屏 2</div>
                <div class="code-name">#dx-fenping2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyan"></use>
                </svg>
                <div class="name">鹰眼</div>
                <div class="code-name">#dx-yingyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yingyan1"></use>
                </svg>
                <div class="name">鹰眼</div>
                <div class="code-name">#dx-yingyan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tubiao-118"></use>
                </svg>
                <div class="name">坐标定位</div>
                <div class="code-name">#dx-tubiao-118</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
